<template>
    <el-dialog v-model="dialogVisible" :title="isEdit[1]" width="640" @close="CloseReset">
        <el-form ref="rulesForm" :model="params" :rules="rules" label-width="120">
            <el-form-item :label="TableLabel.Name" prop="Name">
                <el-input v-model="params.Name" :placeholder="'请输入' + TableLabel.Path" clearable></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.Path" prop="Path">
                <el-input v-model="params.Path" :placeholder="'请输入' + TableLabel.Path" clearable></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.Type" prop="Type">
                <MySelect v-model="params.Type" :placeholder="'请选择' + TableLabel.Type" :options="REQUEST_TYPE"
                    :value="(_, key) => +key" :clearable="false">
                </MySelect>
            </el-form-item>
            <el-form-item :label="TableLabel.Desc">
                <el-input type="textarea" v-model="params.Desc" :placeholder="'请输入' + TableLabel.Desc"
                    :autosize="{ minRows: 1, maxRows: 6 }" resize="none"></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.Enable">
                <el-radio-group v-model="params.Enable">
                    <el-radio v-for="state in ENABLE_STATE" :label="state[0]">
                        {{ state[1] }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="modal-footer">
            <el-button @click="CloseReset">取消</el-button>
            <el-button type="primary" @click="UpdateOrCreate" :loading="editRoleLoading">提交</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref, watch } from 'vue';
import { MySelect } from "@/components"
import * as types from "./types"
import { TableLabel } from "./ConfigData"
import { FormInstance, FormRules } from 'element-plus';
import { ApiApi } from '@/api/permession/api';
import { REQUEST_TYPE, ENABLE_STATE } from "./ConfigData"
import MessageUti from "@/library/utils/MessageUti"

const props = defineProps<{
    visible: types.EditingDialog['modal']
    editForm: types.EditingDialog['editForm'],
}>()

const emit = defineEmits<{
    (e: "update:visible", visible: boolean): void
    (e: 'submitSuccess'): void
}>()

const dialogVisible = computed({
    get: () => props.visible,
    set: (val) => emit("update:visible", val)
})

const rulesForm = ref<FormInstance>();
const rules = ref<FormRules<types.EditDialogForm>>({
    Name: [{ required: true, message: TableLabel.Name + '不能为空', trigger: 'blur' }],
    Type: [{ required: true, message: TableLabel.Type + '不能为空', trigger: 'change' }],
    Path: [{ required: true, message: TableLabel.Path + '不能为空', trigger: 'blur' }]
})

const initForm: types.EditDialogForm = {
    Enable: true,
}

const editRoleLoading = ref(false)
const params = ref<types.EditDialogForm>({ ...initForm })

watch(() => props.editForm, (val) => {
    params.value = { ...val }
})

const isEdit = computed<[boolean, string]>(() => {
    const isTrue = params.value.Id !== undefined
    const message = isTrue ? '编辑' : "新增"

    return [isTrue, message]
})

const UpdateOrCreate = async () => {
    if (!rulesForm.value) { return }

    const valid = await rulesForm.value.validate(() => { })
    if (!valid) { return }

    editRoleLoading.value = true
    const Api = isEdit.value[0] ? ApiApi.UpdateApi : ApiApi.InsertApi;

    try {
        await Api({ ...params.value })
        CloseReset()
        emit("submitSuccess")
        MessageUti.showSuccess(`${isEdit.value[1]}成功`)
    }
    catch (error) { }
    finally {
        editRoleLoading.value = false
    }
}

const CloseReset = () => {
    dialogVisible.value = false

    nextTick(() => {
        params.value = { ...initForm }
        rulesForm.value?.resetFields()
    })
}

</script>

<style scoped></style>